<template>	
<div class="paper">
	<header class="News mu-elevation-4" style="background-color: rgb(92,107,192);">
		<div class="title" style="color: #FFFFFF;">新闻动态</div>
	</header>
	<ul class="mu-list" style="padding: 0">
		<li v-for="item in data" :key="item.id">
			<router-link tag="li" :to="'/newsDetail/' + item.id" class="wu">
				<div class="item-title">{{item.title}}</div>
				<div class="item-iction">
					<i class="da-icon" style="user-select: none;">
						<mu-icon size="36" value="keyboard_arrow_right" :size="20" style="padding-left: 30px;"></mu-icon>
					</i>
				</div>
			</router-link>
		</li>
	</ul>
</div>
</template>

<script>
	export default {
		// 接收属性
		props: ['data'],
		data () {
			return {

			}
		}
	
	}
</script>

<style lang="scss">
	.News{
		display: flex;
		align-self: flex-start;
		-webkit-box-pack: start;
		justify-content: flex-start;
		-webkit-box-align: center;
		align-items: center;
		height: 56px;
		padding: 0 4px;
		z-index: 100;
		color: #ffffff;
	}
	div{
		display: block;
	}
	.paper .title{
		    -webkit-box-flex: 1;
		    -ms-flex: 1;
		    flex: 1;
		    padding-left: 12px;
		    padding-right: 12px;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    font-size: 20px;
		    font-weight: 400;
		    line-height: 56px;
	}
	*{
		margin: 0;
		list-style: none;
	}
	.wu{
		border-bottom: none;
	}
	li{
	  display: flex;
	  -webkit-box-align: center;
	  align-items: center;
	  padding: 5px 8px;
	  overflow: hidden;
	  border-bottom:solid 1px #c0c0c0;
	  color: rgba(0,0,0,.87);
	  &:last-child {
		  border-bottom: none;
	  }
	}
	.mu-list,.mu-list>li{
		display: block;
	}
	.mu-list{
		width: 100%;
		position: relative;
		overflow-x: hidden;
		overflow-y: visible;
		margin: 0;
	}
	.item-title{
		font-size: 16px;
		height: 60px;
		width: 100%;
		line-height: 24px;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		text-align: left;
		min-width: 1px;
		float: left;
		word-wrap: break-word;
	}
	*,:after,:before{
		box-sizing: border-box;
	}
	.item-iction{
		float: right;
		min-width: 56px;
		display: flex;
		height: 100%;
		-webkit-box-align: center;
		align-items: center;
		color: rgba(0,0,0,.54);
	}
	i{
		width: 24px;
		height: 24px;
	}
</style>
